<template>
  <div class="tw-main">
    <div class="screen">
      <el-row class="tw-enrollment">
        <el-col :span="16">
          <el-row class="tw-grid">
            <el-col class="tw-grid__left">
              <tw-card label="县本级招生阶段数据概览"
               :heightCard="'615px'">
                <div class="tw-new-title">
                  <p>
                    <span class="digi" style="color:#07ffff">{{new Date().getFullYear()}}</span>
                    <span style="color:#00a7fe">年</span>
                    <span class="xtitle" style="color:#00a7fe">待录取学生:</span>
                    <!-- <span class="digi">{{waitAdmission}}</span> -->
                    <!-- <span class="digi">{{waitAdmission| NumFormat}}</span> -->
                    <span class="digi" style="color:#07ffff">0</span>

                    <span class="xtitle" style="color:#00a7fe">当前可分配学位数:</span>
                    <!-- <span class="digi">{{distributableDegreeNum}}</span> -->
                    <!-- <span class="digi">{{distributableDegreeNum | NumFormat}}</span> -->
                    <span class="digi" style="color:#07ffff">0</span>
                  </p>
                </div>
                <div
                  class="tw-new-flex"
                  style="margin-bottom:52px;margin-top:15px;align-items: flex-end;"
                >
                  <div class="tw-new-flex" style="width:9%;margin-right:30px">
                    <div class="m-single-info x-border" id="infoAcq">
                      <p>
                        <img src="/static/weishidataview/images/getinfo.png" />
                      </p>
                      <p class="tw-info-box__label" style="margin-top:14px;">信息采集</p>
                      <!-- <p class="tw-info-box__value digi">{{infoAcqu?infoAcqu:'--'}}</p> -->
                      <p class="tw-info-box__value digi">4,686</p>
                      <!-- <p class="tw-info-box__value digi">{{ infoAcqu | NumFormat }}</p> -->
                    </div>
                    <!-- <div><img src="/static/weishidataview/images/arrow.png"></div> -->
                  </div>
                  <div style="width:510px; margin-right:30px">
                    <div class="tw-new-flex" style="margin-top:20px;">
                      <div>
                        <img
                          src="/static/weishidataview/images/arrow.png"
                          style="visibility:hidden;"
                        />
                      </div>
                      <div
                        class="tw-info-box__layout x-border x-flex"
                        style="width:450px;justify-content: space-around;">
                        <div class="tw-new-flex x-mid-bkg">
                          <div style="text-align:center;font-size:24px;color:#07ffff;">民办</div>
                        </div>
                        <div style="width:210px">
                          <p class="tw-info-box__label">民办学校计划招生</p>
                          <!-- <p class="tw-info-box__value digi">{{privateRecruitNum?privateRecruitNum:'--'}}</p> -->
                          <p class="tw-info-box__value digi">357</p>
                          <!-- <p class="tw-info-box__value digi">{{privateRecruitNum | NumFormat}}</p> -->
                        </div>
                        <div style="width:140px">
                          <p class="tw-info-box__label">报名人数</p>
                          <!-- <p class="tw-info-box__value digi">{{privateApplicantstNum?privateApplicantstNum:'--'}}</p> -->
                          <p class="tw-info-box__value digi">762</p>
                          <!-- <p class="tw-info-box__value digi">{{privateApplicantstNum | NumFormat}}</p> -->
                        </div>
                      </div>
                      <div>
                        <img
                          src="/static/weishidataview/images/arrow.png"
                          style="margin-left:10px;"
                        />
                      </div>
                    </div>
                    <div class="tw-new-flex" style="margin-top:30px;">
                      <div>
                        <img src="/static/weishidataview/images/arrow.png" />
                      </div>
                      <div
                        class="x-flex tw-info-box__layout x-border"
                        style="width:450px;justify-content: space-around;"
                      >
                        <div class="tw-new-flex x-mid-bkg">
                          <div style="text-align:center;font-size:24px;color:#07ffff;">公办</div>
                        </div>
                        <div style="width:210px">
                          <p class="tw-info-box__label">公办学校计划招生</p>
                          <!-- <p class="tw-info-box__value" style="font-size:20px;">{{publicRecruitNum?publicRecruitNum:'--'}}</p> -->
                          <p class="tw-info-box__value" style="font-size:20px;">3,620</p>
                          <!-- <p class="tw-info-box__value digi">{{publicRecruitNum | NumFormat}}</p> -->
                        </div>
                        <div style="width:140px">
                          <p class="tw-info-box__label">报名人数</p>
                          <!-- <p class="tw-info-box__value digi">{{publicApplicantstNum?publicApplicantstNum:'--'}}</p> -->
                          <p class="tw-info-box__value digi">4,302</p>
                          <!-- <p class="tw-info-box__value digi">{{publicApplicantstNum | NumFormat}}</p> -->
                        </div>
                      </div>
                      <div>
                        <img
                          src="/static/weishidataview/images/arrow.png"
                          style="margin-left:10px;"
                        />
                      </div>
                    </div>
                    <div class="tw-new-flex" style="margin-top:30px;">
                      <div>
                        <img
                          src="/static/weishidataview/images/arrow.png"
                          style="visibility:hidden;"
                        />
                      </div>
                      <div
                        class="tw-info-box__layout x-border x-flex"
                        style="width:450px;justify-content: space-around;"
                      >
                        <div class="tw-new-flex x-mid-bkg">
                          <div style="text-align:center;font-size:20px;color:#07ffff;">新居民</div>
                        </div>
                        <div style="width:210px">
                          <p class="tw-info-box__label">新居民子女学校计划招生</p>
                          <!-- <p class="tw-info-box__value" style="font-size:20px;">{{newRecruitNum?newRecruitNum:'--'}}</p> -->
                          <p class="tw-info-box__value" style="font-size:20px;">245</p>
                          <!-- <p class="tw-info-box__value digi">{{newRecruitNum | NumFormat}}</p> -->
                        </div>
                        <div style="width:140px">
                          <p class="tw-info-box__label">报名人数</p>
                          <!-- <p class="tw-info-box__value digi">{{newApplicantstNum?newApplicantstNum:'--'}}</p> -->
                          <p class="tw-info-box__value digi">375</p>
                          <!-- <p class="tw-info-box__value digi">{{newApplicantstNum | NumFormat}}</p> -->
                        </div>
                      </div>
                      <div>
                        <img
                          src="/static/weishidataview/images/arrow.png"
                          style="margin-left:10px;"
                        />
                      </div>
                    </div>
                  </div>
                  <div class="tw-new-flex" style="width:9%;margin-right:0px">
                    <div class="m-single-info x-border" id="infoExam">
                      <p>
                        <img src="/static/weishidataview/images/auditpass2.png" />
                      </p>
                      <p class="tw-info-box__label" style="margin-top:14px;">信息审核通过</p>
                      <!-- <p class="tw-info-box__value digi">{{infoReview?infoReview:'--'}}</p> -->
                      <p class="tw-info-box__value digi">4,868</p>
                      <!-- <p class="tw-info-box__value digi">{{infoReview | NumFormat}}</p> -->
                    </div>
                  </div>
                  <div style="width:300px;height:400px">
                    <div class="tw-new-flex" style="margin-top:10px;">
                      <div>
                        <img src="/static/weishidataview/images/arrow.png" />
                      </div>
                      <div
                        class="tw-info-box__layout x-border"
                        style="width:240px;padding-top:21px;padding-bottom:22px;">
                        <p class="tw-info-box__label">民办学校录取人数</p>
                        <!-- <p class="tw-info-box__value digi">{{privateAdmissionNum?privateAdmissionNum:'--'}}</p> -->
                        <p class="tw-info-box__value digi">320</p>
                        <!-- <p class="tw-info-box__value digi">{{privateAdmissionNum | NumFormat}}</p> -->
                      </div>
                    </div>

                    <div class="tw-new-flex" style="margin-top:26px;">
                      <div>
                        <img src="/static/weishidataview/images/arrow.png" />
                      </div>
                      <div
                        class="tw-info-box__layout x-border"
                        style="width:240px;padding-top:21px;padding-bottom:22px;">
                        <p class="tw-info-box__label">公办学校录取人数</p>
                        <!-- <p class="tw-info-box__value digi">{{publicAdmissionNum?publicAdmissionNum:'--'}}</p> -->
                        <p class="tw-info-box__value digi">3,415</p>
                        <!-- <p class="tw-info-box__value digi">{{publicAdmissionNum | NumFormat}}</p> -->
                      </div>
                    </div>
                    <div class="tw-new-flex" style="margin-top:26px;">
                      <div>
                        <img src="/static/weishidataview/images/arrow.png" />
                      </div>
                      <div
                        class="tw-info-box__layout x-border"
                        style="width:240px;padding-top:21px;padding-bottom:22px;">
                        <p class="tw-info-box__label">新居民子女学校录取人数</p>
                        <!-- <p class="tw-info-box__value digi">{{newAdmissionNum?newAdmissionNum:'--'}}</p> -->
                        <p class="tw-info-box__value digi">207</p>
                        <!-- <p class="tw-info-box__value digi">{{newAdmissionNum | NumFormat}}</p> -->
                      </div>
                    </div>
                  </div>
                </div>
              </tw-card>
            </el-col>
          </el-row>
          <el-row class="tw-grid">
            <el-col class="tw-grid__left">
              <tw-card label="审核通过率"
               :heightCard="'298px'">
                <el-row>
                  <el-col>
                    <tw-echarts
                      id="echarts_auditPassRatio"
                      ref="echarts_auditPassRatio"
                      :additionalOptions="additionalOptions['echarts_auditPassRatio']"
                      height="208px"
                    ></tw-echarts>
                    <tw-steps
                      v-model="currentStep"
                      :autoPlay="autoPlay"
                      :steps="steps"
                      @steps-change="handleStepsChange"
                    ></tw-steps>
                  </el-col>
                </el-row>
              </tw-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row class="tw-grid">
            <el-col :lg="24" :md="24" class="tw-grid__right">
              <tw-card label="生源类型占比"
               :heightCard="'298px'">
                <!-- <tw-echarts
                  id="echarts_indexStudentSourceRatio"
                  ref="echarts_indexStudentSourceRatio"
                  :additionalOptions="additionalOptions['echarts_indexStudentSourceRatio']"
                  height="228px"
                ></tw-echarts> -->

                  <tw-chart
                    :chartOption="baroption5.chartOption"
                    :dataset="baroption5.dataset"
                    :chartDataMaps="baroption5.chartDataMaps"
                    height='220px'
                    width='100%'>
                  </tw-chart>
              </tw-card>
            </el-col>
          </el-row>
          <el-row class="tw-grid">
            <el-col :lg="24" :md="24" class="tw-grid__right">
              <tw-card label="监护人活动时间段"
                :heightCard="'298px'">
                <div style="text-align:center;margin-top:10px;font-size:18px;color:#00a7fe">
                  <span style="display: inline-block;
                    margin-top: 94px;
                    color: #fff;
                    font-size: 19px;">当前非招生时间</span>
                  <!-- <span class="digi" style="font-size:20px;color:#07ffff">{{maxActiveTime?maxActiveTime:'--'}}</span> -->
                </div>
                <!-- <tw-echarts
                  id="echarts_guardianActivityPeriod"
                  ref="echarts_guardianActivityPeriod"
                  :additionalOptions="additionalOptions['echarts_guardianActivityPeriod']"
                  height="203px"
                ></tw-echarts> -->
              </tw-card>
            </el-col>
          </el-row>
          <el-row class="tw-grid">
            <el-col :lg="24" :md="24" class="tw-grid__right">
              <tw-card label="证件信息查询请求汇总"
               :heightCard="'298px'">
                <tw-chart :options="baroption.option" height="228px"></tw-chart>
              </tw-card>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
// import echarts from 'echarts'
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
import TwChart from '@/components/TwChart.vue'
import TwSteps from '@/components/TwSteps'

export default {
  props: [],
  created () {
    this.baroption5 = JSON.parse(JSON.stringify(this.pie))
    let vm = this
    // var wPath = window.document.location.href
    // var pathName = this.$route.path
    // var pos = wPath.indexOf(pathName)
    // var localhostPath = wPath.substring(0, pos)

    // echarts_auditPassRatio 审核通过率静态数据
    vm.$axios
      .get(
        window.location.origin +
          '/static/weishidataview/jsondata/echarts_auditPassRatio.json'
      )
      .then(
        (response) => {
          let dataList = response.data.data
          var n = Math.ceil((dataList.length - 1) / 6)
          for (let i = 0; i < n; i++) {
            vm.dataSwipe[i] = dataList.slice(i * 6, (i + 1) * 6)
            vm.steps.push({ id: i })
          }
          this.additionalOptions.echarts_auditPassRatio.data = this.dataSwipe[0]
        },
        (response) => {
          console.log('error')
        }
      )

    // echarts_indexStudentSourceRatio 生源类型占比
    this.$axios
      .get(
        window.location.origin +
          '/static/weishidataview/jsondata/echarts_indexStudentSourceRatio.json'
      )
      .then(
        (response) => {
          console.log(response)
          let chartDataMaps = [{
            dataKey: 'value',
            name: '教师数量'
          }]
          let dataset=[]
          dataset=response.data.seriesData
          this.baroption5.dataset = dataset
           this.baroption5.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'pie',
              radius: [40, 60],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: '{b}',
                  alignTo: 'none'
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          })
          // this.additionalOptions.echarts_indexStudentSourceRatio =
          //   response.data
        },
        (response) => {
          console.log('error')
        }
      )

    // echarts_guardianActivityPeriod 活动监护人静态数据
    this.$axios
      .get(
        window.location.origin +
          '/static/weishidataview/jsondata/echarts_guardianActivityPeriod.json'
      )
      .then(
        (response) => {
          this.additionalOptions.echarts_guardianActivityPeriod = response.data
        },
        (response) => {
          console.log('error')
        }
      )
    // echarts_certificatesQuery 集群资源应用
    this.$axios
      .get(
        window.location.origin +
          '/static/weishidataview/jsondata/echarts_certificatesQuery.json'
      )
      .then(
        (response) => {
          // this.additionalOptions.echarts_certificatesQuery = response.data
          let data = response.data
          let a = this.baroption.option.legend
          let xAxisData = this.baroption.option.xAxis
          a.data = ["请求次数","请求成功率"]
          xAxisData.data=data.xAxisData
          let b = this.baroption.option.series
          data.seriesData.forEach((item, index) => {
            if (index === 1) {
              b.push({
                name: item.name,
                data: item.data,
                type: 'line',
                yAxisIndex: 1
              })
            } else {
              b.push({
                name: item.name,
                data: item.data,
                type: 'bar',
                barMaxWidth: 22
              })
            }
          })
        },
        (response) => {
          console.log('error')
        }
      )
  },
  filters: {
    // 千分位自定义过滤器

    NumFormat: function (value) {
      if (!value) return ' '
      var intPart = Number(value).toFixed(0) // 获取整数部分
      var intPartFormat = intPart
        .toString()
        .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      return intPartFormat
    }
  },
  mounted () {
    // 绑定echarts的resize方法
    window.onresize = () => {
      this.$refs['echarts_indexStudentSourceRatio'].resizeChart()
      this.$refs['echarts_auditPassRatio'].resizeChart()
      this.$refs['echarts_guardianActivityPeriod'].resizeChart()
      // this.$refs['echarts_certificatesQuery'].resizeChart()
    }
  },
  data: function () {
    return {
        pie: {
        chartOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '',
              type: 'pie',
              // roseType: 'area',
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        },
        dataset: [],
        chartDataMaps: []
      },
      baroption5: {},
      dataSwipe: [],
      autoPlay: true,
      currentStep: 0,
      steps: [],
      activeNum: [],
      maxActiveTime: '',
      approvedTypeList: {
        0: '学生户籍',
        1: '监护人户籍',
        2: '监护人产权房',
        3: '监护人提供无房证明',
        4: '监护人居住证',
        5: '监护人社保',
        6: '政策类型学生',
        7: '新居民类学生',
        8: '监护人居住登记',
        9: '祖（外祖）父母产权房在施教区',
        '-1': '亲子关系',
        '-102': '学生学籍'
      },
      waitAdmission: '', // 待录取总数
      distributableDegreeNum: '', // 当前可分配学位数
      infoAcqu: '', // 信息采集
      infoReview: '', // 信息审核
      recruitNumList: [], // 招生计划数
      publicRecruitNum: '', // 公立招生计划数
      privateRecruitNum: '', // 民办招生计划数
      newRecruitNum: '', // 新居民招生计划数
      applicantsNumList: [], // 报名人数
      publicApplicantstNum: '', // 公立招生报名数
      privateApplicantstNum: '', // 民办招生报名数
      newApplicantstNum: '', // 新居民招生报名数
      admissionNumList: [], // 录取人数
      publicAdmissionNum: '', // 公立招生录取数
      privateAdmissionNum: '', // 民办招生录取数
      newAdmissionNum: '', // 新居民招生录取数
      additionalOptions: {
        echarts_auditPassRatio: {
          note: '审核通过率',
          name: ['系统自动审核', '人工审核', '审核未通过'],
          data: []
        },
        echarts_indexStudentSourceRatio: {
          note: '生源占比',
          seriesData: []
        },
        echarts_guardianActivityPeriod: {}
        // echarts_certificatesQuery: {}
      },
      baroption: {
        option: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: true,
            data: [],
            top: 0,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '25%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 16,
              interval: 0,
              formatter: function (value, index) {
                let text = value
                if (text.length > 4 && text.length <= 8) {
                  text = `${text.slice(0, 4)}\n${text.slice(4)}`
                } else if (text.length > 8 && text.length <= 16) {
                  text = `${text.slice(0, 4)}\n${text.slice(4, 8)}\n${text.slice(16)}`
                }
                return text
              }
            },
            data: []
          },
          yAxis: [
            {
              type: 'value',
              name: '万次11',

              axisLabel: {
                fontSize: 19,
                formatter: '{value}'
              }
            },
            {
              type: 'value',
              min: 0,
              max: 100,
              axisLabel: {
                fontSize: 19,
                formatter: '{value}%'
              }
            }
          ],
          series: []
        }
      }
    }
  },
  components: {
    TwCard,
    TwEcharts,
    TwChart,
    TwSteps
  },
  methods: {
    handleStepsChange (params) {
      let vm = this
      vm.additionalOptions.echarts_auditPassRatio.data = []
      vm.additionalOptions.echarts_auditPassRatio.data = vm.dataSwipe[params.id]
      // console.log(
      //   'vm.additionalOptions.echarts_auditPassRatio.data====',
      //   vm.additionalOptions.echarts_auditPassRatio.data
      // )
      // console.log('回传的参数id=========', params.id)
    }
  }
}
</script>

<style scoped>
.tw-enrollment .xtitle {
  padding-left: 54px;
}
.tw-enrollment .tw-new-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tw-enrollment .x-flex {
  display: flex;
}
.tw-enrollment .x-border {
  border: 2px solid #005dff;
  background-color: rgba(0, 94, 255, 0.2);
}
.m-single-info {
  padding: 120px 0;
  text-align: center;
  width: 140px;
}
.tw-enrollment .tw-info-box__label {
  text-align: center;
  font-size: 18px;
}
.tw-enrollment .tw-info-box__value {
  text-align: center;
  color: #07ffff;
}
.tw-enrollment .x-mid-bkg {
  width: 70px;
  height: 70px;
  background: url(/static/weishidataview/images/enrollbkg.png) no-repeat;
  background-size: 100%;
}
.m-single-info .tw-info-box__value {
  color: #fff;
}
#infoAcq {
  height: 402px;
}

#infoAcq .m-single-info .x-border {
  padding: 125px 0;
}

#infoExam {
  height: 402px;
}

#infoExam. .m-single-info .x-border {
}
</style>
